<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>联系人</title>
    <link rel="stylesheet" type="text/css" href="../assets/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../assets/fonts/line-icons.css">
    <link rel="stylesheet" type="text/css" href="../assets/css/main.css">
    <link rel="stylesheet" type="text/css" href="../assets/css/responsive.css">
</head>
<body style="overflow: auto;">
<div class="container-fluid">
    <div class="breadcrumb-wrapper row">
        <div class="col-12 col-lg-3 col-md-6">
			<h4 class="page-title">好友列表</h4>
        </div>
        <div class="col-12 col-lg-9 col-md-6">
            <ol class="breadcrumb float-right">
                <li class="active">好友管理</li>
                <li class="active"> / 好友列表</li>
            </ol>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-12 col-md-8" id="accordion">
            <div class="card">
            </div>
        </div>
        <div class="col-12 col-md-4">
            <div class="profile-bg">
                <div class="user-profile">
                    <figure class="profile-wall-img">
                        <img class="img-fluid" src="../assets/img/profile/user-bg.jpg" alt="User Wall">
                    </figure>
                    <div class="profile-body">
                        <figure class="profile-user-avatar">
                            <img style="width: 84px;height: 84px" src="../assets/img/profile/user1.jpg" alt="User Wall" id="chooseUserImg">
                        </figure>
                        <h3 class="profile-user-name" id="chooseNickName"></h3>
                        <p id="chooseUserName"></p>
						<p id="chooseUserSex"></p>
						<p id="chooseUserIntroduce"></p>
						<p id="chooseUserSchool"></p>
						<p id="chooseUserFaculty"></p>
						<p id="chooseUserClass"></p>
						<p id="chooseUserRole"></p>
						<p id="chooseUserIsPass"></p>
                        <div class="m-t-5">
                            <button class="btn btn-common" id="beginChat">发送消息</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../assets/js/jquery-min.js"></script>
<script src="../assets/js/bootstrap.min.js"></script>
<script>
    var ctx = window.parent.ctx;
    var user = window.parent.user;
    var par = $("body");
    var pheight = $(window.parent.document).find(".main-content").height();
    $(function () {
        // 初始化为当前用户的个人信息
        showUser(user);

        $.ajax({
            type: "post",
            url: ctx+"/group/findByUserId",
			xhrFields: {
			    withCredentials: true
			},
            success: function (data) {
                // 展示所有用户分组列表
                for(var i=0;i<data.length;i++){
                    $(".card").append("<div class='card-header'><a class='card-link' data-toggle='collapse' href='#"+data[i].id+"'>"+data[i].groupName+"</a></div>"+
                        "<div id='"+data[i].id+"' class='collapse show' data-parent='#accordion'></div></div>");
                    var userList = data[i].userFriendList;
                    for(var j=0;j<userList.length;j++){
                        var targetUser = userList[j].targetUser;
                        $("#"+data[i].id).append("<div class='card-body'><a href='#' class='row' style='margin-left: 10px'><p hidden>"+(i*100000+j)+"</p>"+
                            "<img src="+targetUser.profilePhoto+" alt='user-img' class='img-circle' style='border-radius:50%;width: 50px;height: 50px'/><div><span>"+targetUser.nickname+
                            "</span></br><span>个性签名："+targetUser.introduce+"</span></div></a></div>")
                    }
                }
				par.height(pheight);
				
                // 点击用户展示详情
                var chooseUser = null;
                $(".card-body a").click(function () {
                    var t=$(this).find("p").text();
                    chooseUser=data[parseInt(t/100000)].userFriendList[parseInt(t%100000)].targetUser;
					showUser(chooseUser);
                });

                // 与点击用户聊天
                $("#beginChat").click(function () {
                    // 请求后台修改当前用户未最近聊天好友
                    $.ajax({
                        type: "post",
                        url: ctx + "/userFriend/updateRecently",
                        xhrFields: {
                            withCredentials: true
                        },
                        data: {targetUserId: chooseUser.id,isRecently: '1'},
                        success: function () {
                            // 子页面切换为聊天界面
                            $(window.parent.document).find("#frameContent").attr("src","../chat/chat-app.html");
                            // 将点击用户加入当前聊天列表
                            window.parent.nowChat=chooseUser.id;
                        }
                    });
                });
            }
        });
    });
	
	// 显示当前用户基本信息
	function showUser(user){
	    if(user===null){
	        return;
        }
		$("#chooseUserImg").attr('src',user.profilePhoto);
		$("#chooseNickName").html(user.nickname);
		$("#chooseUserName").html("账号："+user.username);
		$("#chooseUserSex").html("性别："+user.sex);
		$("#chooseUserIntroduce").html("个性签名："+user.introduce);
		if(user.role==0){
			$("#chooseUserFaculty").show();
			$("#chooseUserClass").show();
			$("#chooseUserSchool").html("学校："+user.school);
			$("#chooseUserFaculty").html("学院："+user.faculty);
			$("#chooseUserClass").html("班级："+user.userClass);
			$("#chooseUserRole").html("角色：学生");
		}else if(user.role==1){
			$("#chooseUserFaculty").show();
			$("#chooseUserSchool").html("学校："+user.school);
			$("#chooseUserFaculty").html("学院："+user.faculty);
			$("#chooseUserClass").hide();
			$("#chooseUserRole").html("角色：老师");
		}else{
			$("#chooseUserSchool").html("学校："+user.school);
			$("#chooseUserFaculty").hide();
			$("#chooseUserClass").hide();
			$("#chooseUserRole").html("角色：管理员");
		}
		if(user.isPass=='0'){
			$("#chooseUserIsPass").html("身份审核：审核中");
		}else if(user.isPass=='1'){
			$("#chooseUserIsPass").html("身份审核：审核通过");
		}else{
			$("#chooseUserIsPass").html("身份审核：未通过");
		}

	}
</script>
</body>
</html>